<template>
  <div>
    <div class="mtb20">
      <el-form inline size="medium" :model="moduleData">
        <el-form-item label="场次：">
          <el-input v-model="variables.title" placeholder="请输入场次"></el-input>
        </el-form-item>
        <el-form-item label="链接：">
          <el-input v-model="variables.subTitle" placeholder="请输入链接地址"></el-input>
        </el-form-item>

        <div class="mtb20">
          <pcSinglImageUploadTemplate
            :moduleId="moduleData.moduleId"
            :fileList="variables.bigImgList"
            :MoreMapDialogVisible="MoreMapDialogVisible"
            :moreImagesLabel="leftImg"
          ></pcSinglImageUploadTemplate>
        </div>

      </el-form>
    </div>


    <div slot="footer" class="dialog-footer">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveModuleData" size="mini">确定</el-button>
    </div>

  </div>
</template>
<script>
import pcSinglImageUploadTemplate from ".././component/pcSinglImageUploadTemplate";
export default {
  components: {
    pcSinglImageUploadTemplate
  },
  props: {
  //模块Id
    moduleId: {
      type: String
    },

    //模块页面的所有数据
    moduleData: {
      type: Object,
      default: () => {
        return {
        };
      }
    },

    //上传文件的列表
    fileList: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data() {
    return {
      MoreMapDialogVisible: false, //多图弹框是否展示
      leftImg: {
        //上传左边图
        name: "上传左边图",
        btnFlag: true
      },
      variables :{
        title: null,
        subTitle: null,
        secondTitleTableData: [],
        bigImgList: [],
      },

    };
  },

  mounted(){
    //对象当中包含对象,需要JSON解析一下;
    if (this !== null && this.moduleData !== null
      && this.moduleData.variables !== null
      && this.moduleData.variables !== ''
      && this.moduleData.variables !== ""
    ) {
      this.variables = this.moduleData.variables;
    }
  },

  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },


    /**
     * 保存模块数据
     */
    saveModuleData(){
      let this_ = this;
      let params = {};
      params.templateDataType = 0;
      params.moduleId = this_.moduleData.cmsModuleId;
      params.platform = 2;

      //图片url转换
      let bigImgList = this_.variables.bigImgList;
      if (bigImgList!=null && bigImgList.length>0){
        bigImgList.forEach(item => {
          item.imgUrl = item.url;
        });
      }else{
        bigImgList = [];
      }


      params.variablesObject = {
        title: this_.variables.title,
        subTitle: this_.variables.subTitle,
        bigImgList:bigImgList,
      };
      this_.utils.request.cmsPageModuleAddModuleData(params, res => {
        if (res.code === "0000") {
          this_.$emit('getIndex');
          this_.$message({"message": "保存成功", type: "success"});
        } else {
          this_.variables={};
          this_.$message({"message": res.msg, type: "error"});
        }
      })
    },

    /**
     * 返回上一页
     */
    close(){
      this.$router.push("/Pages/Configuration/IndexShow");
    },



  },



};
</script>
<style lang="scss" scoped>
.mtb20 {
  margin: 20px 0;
  text-align: left;
}
.el-button {
  margin-bottom: 5px;
  text-align: left;
}
</style>





